<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>摩导</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="../css/elementui.css">
  <script src="../libs/vue.js"></script>

</head>
<body>
<div id="geo_point">
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
    <el-form-item label="名称" prop="name">
      <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>

  <el-row :gutter="10" class="mb8" style="margin: 10px 10px 10px 0 !important;">
    <el-col :span="1.5">
      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">
        新增
      </el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
    </el-col>
  </el-row>

  <el-table v-loading="loading" :data="dataList" border @selection-change="handleSelectionChange" style="width: 100%">
    <el-table-column label="ID" align="center" prop="id"></el-table-column>
    <el-table-column label="名称" align="center" prop="name"></el-table-column>
    <el-table-column label="经度" align="center" prop="lon"></el-table-column>
    <el-table-column label="纬度" align="center" prop="lat"></el-table-column>
    <el-table-column label="类型" align="center" prop="type">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.type">{{ getPointTypeName(scope.row.type) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="地址" align="center" prop="address"></el-table-column>
    <el-table-column label="图片预览" align="center" width="100">
      <template slot-scope="scope">
        <el-button type="text" @click="previewImages(scope.row.id)">查看</el-button>
      </template>
    </el-table-column>
    <el-table-column label="创建者" align="center" prop="createUid"></el-table-column>
    <el-table-column label="创建时间" align="center" prop="createDate"></el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination style="text-align: right;margin: 10px 0" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize"
                 :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                 @current-change="pageCurrentChangeHandle">
  </el-pagination>
  <!--图片预览-->
  <el-dialog :visible.sync="imagePreviewVisible" title="图片预览" width="60%">
    <el-image
            v-for="(img, index) in previewImageList"
            :key="index"
            :src="img"
            style="width: 200px; margin-right: 10px"
            :preview-src-list="previewImageList"
    />
  </el-dialog>
  <!-- 添加或修改地图图层对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
    <el-row :gutter="20">
      <!-- 地图选择区域 -->
      <el-col :span="14">
        <iframe
                id="mapPage"
                width="100%"
                height="700px"
                frameborder="0"
                style="border: 1px solid #e4e7ed; border-radius: 4px"
                src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=TCXBZ-T6YC5-KUDI3-IGLVQ-5TIZ3-CQBLP&referer=myapp">
        </iframe>
      </el-col>

      <!-- 表单区域 -->
      <el-col :span="10">
        <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="80px"
                label-position="top"
                size="small"
                class="form-panel"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" clearable />
          </el-form-item>

          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="经度" prop="lon">
                <el-input v-model="form.lon" placeholder="请输入经度" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="lat">
                <el-input v-model="form.lat" placeholder="请输入纬度" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择类型" clearable>
              <el-option
                      v-for="(label, value) in PointTypeNameMap"
                      :key="value"
                      :label="label"
                      :value="value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入地址" clearable />
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input
                    v-model="form.remark"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入备注"
                    clearable
            />
          </el-form-item>
          <el-form-item label="图片">
            <el-upload
                    list-type="picture-card"
                    :auto-upload="false"
                    action=""
                    :file-list="imageList"
                    :on-change="handleImageChange"
                    :on-remove="handleImageRemove"
                    accept="image/*"
                    multiple
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 按钮区域 -->
    <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: 20px">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>

</div>


<script src="../libs/elementui.js"></script>
<script src="../libs/jquery.min.js"></script>
<!-- 引入常量定义 -->
<script src="../js/constants.js"></script>
<script src="../js/geo/point.js"></script>
</body>
<style lang="scss" scoped>
  .el-dialog .el-dialog__header {
    background-color: rgb(39, 112, 212);

  }
  .el-dialog .el-dialog__header .el-dialog__title {
    color: #fff;
  }
  .el-dialog .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    font-size: 16px;
  }
</style>
</html>
